<template>
  <div class="form-container">
    <el-card class="box-card" shadow="hover">
      <div slot="header" class="clearfix">
        <span class="font-extra-large">详情</span>
        <el-button
          style="margin: 0; margin-left: 20px; padding: 3px 0"
          type="text"
          @click="back"
          >返回</el-button
        >
        <el-button
          style="float: right; padding: 3px 0"
          type="text"
          @click="handleVerify(item.id)"
          >审核</el-button
        >
      </div>
      <div class="font-title-medium item">
        审核状态:
        <span :class="item.status === 30 ? 'color-success' : 'color-danger'">{{
          item.status | statusFilter
        }}</span>
      </div>
      <div class="font-title-medium item">
        标题: <b>{{ item.title }}</b>
      </div>
      <div class="font-title-medium item">
        发布者: <span>{{ item.userNickname }}</span>
      </div>
      <div class="font-title-medium item">
        发布时间: <span>{{ item.ctime }}</span>
      </div>
      <div
        class="font-title-medium item"
        style="background-color: #909399; color: white"
      >
        内容: <span>{{ item.content }}</span>
      </div>
      <div class="font-title-medium item">
        浏览量: <span>{{ item.viewCount }}</span>
      </div>
    </el-card>
    <el-dialog title="审核" :visible.sync="verifyDialogVisible" width="30%">
      <el-form :model="verifyForm" label-width="80px">
        <el-form-item label="审核结果">
          <el-radio-group v-model="verifyForm.verifyStatus" size="medium">
            <el-radio :label="40">下架</el-radio>
            <el-radio :label="30">通过</el-radio>
            <el-radio :label="0">不通过</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="审核意见">
          <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4 }"
            placeholder="请输入内容"
            v-model="verifyForm.detail"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleVerifySubmit" size="small"
          >确 定</el-button
        >
        <el-button @click="verifyDialogVisible = false" size="small"
          >取 消</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getItem, updateStatus } from "@/api/expShare";
const defaultItem = {
  content: "",
  ctime: null,
  viewCount: 0,
  id: null,
  status: null,
  statusName: "",
  utime: null,
  userAvatar: null,
  userNickname: null,
  uuid: null,
};
export default {
  data() {
    return {
      item: Object.assign({}, defaultItem),
      verifyDialogVisible: false,
      verifyForm: {
        ids: [],
        verifyStatus: 30,
        detail: "",
      },
    };
  },
  created() {
    this.getItemDetail();
  },
  filters: {
    statusFilter(value) {
      if (value === 40) {
        return "已下架";
      } else if (value === 30) {
        return "审核通过";
      } else if (value === 20) {
        return "待审核";
      } else if (value === 10) {
        return "待审核";
      } else {
        return "审核未通过";
      }
    },
  },
  methods: {
    getItemDetail() {
      getItem(this.$route.query.id).then((response) => {
        this.item = response.data;
      });
    },
    back() {
      // 返回上级
      this.$router.back();
    },
    handleVerify(id) {
      this.verifyDialogVisible = true;
      this.verifyForm.ids = [id];
    },
    handleVerifySubmit() {
      let params = new URLSearchParams();
      params.append("ids", this.verifyForm.ids);
      params.append("verifyStatus", this.verifyForm.verifyStatus);
      params.append("detail", this.verifyForm.detail);
      updateStatus(params).then((res) => {
        this.$message({
          message: "修改成功",
          type: "success",
          duration: 1000,
        });
        this.verifyDialogVisible = false;
        this.getItemDetail();
      });
    },
  },
};
</script>

<style>
.item {
  margin-bottom: 18px;
}
</style>